---
title: Marca de verificació
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

Representa una acció exitosa o completada.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return <Checkmark />;
};
```

</Tab>

<Tab title="Props">

Extén `React.ComponentPropsWithoutRef<'div'>` i accepta totes les propietats d'un element `div` regular.

</Tab>

</Tabs>

## Marca de verificació animada

Representa una icona de marca de verificació amb la característica addicional d'animació.

<Tabs>

<Tab title="Usage">

```jsx
import { AnimatedCheckmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return (
    <AnimatedCheckmark
      isAnimating={true}
      color="green"
      duration={0.5}
      size={30}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propietats  | Tipus   | Descripció                                  | Per defecte |
| ----------- | ------- | ------------------------------------------- | ----------- |
| isAnimating | boolean | Controls whether the checkmark is animating | fals        |
| color       | cadena  | Color de la marca de verificació            |             |
| durada      | número  | La durada de l'animació en segons           | 0,5 segons  |
| tamany      | número  | La mida de la marca de verificació          | 28 píxels   |

</Tab>

</Tabs>
